<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 添加canvas标签 -->
    <canvas id="cvs" width="600" height="600"></canvas>
</body>
<script>
    //获取canvas标签
    const cvsDom = document.querySelector("#cvs")
    //生成绘制元素
    const context = cvsDom.getContext("2d")

    //线的粗细度
    // context.lineWidth = 1;
    // context.strokeStyle = 'black';

 
    context.beginPath()
    context.moveTo(50, 50)   
    context.lineTo(50, 450);
    context.stroke();


    context.beginPath()
    context.lineTo(50, 450);
    context.lineTo(500, 450);
    context.stroke();
     
    context.beginPath()
    context.lineTo(50, 450); 
    context.lineTo(80, 400);
    context.stroke();

    context.beginPath()
    context.lineTo(80, 400); 
    context.lineTo(100, 430);
    context.stroke();



    context.beginPath()
    context.lineTo(100, 430); 
    context.lineTo(120, 300);
    context.stroke();


    context.beginPath()
    context.lineTo(120, 300); 
    context.lineTo(150, 410);
    context.stroke();


    context.beginPath()
    context.lineTo(150, 410); 
    context.lineTo(190, 200);
    context.stroke();

     //柱子
    context.beginPath()
    context.strokeRect(300, 350, 30, 100);
    context.stroke();


    context.beginPath()
    context.strokeRect(350, 250, 30, 200);
    context.stroke();

    context.beginPath()
    context.strokeRect(400, 220, 30, 230);
    context.stroke();


    context.beginPath()
    context.strokeRect(450, 400, 30, 50);
    context.stroke();






</script>

</html>
<style>
    #cvs {
        border: 1px solid red;
    }
</style>